<template>
  <window ref="win" title="排时间">
      <form class="am-form tpl-form-border-form tpl-form-border-br" data-am-validator :id="id">
        <div class="am-form-group ">

          <div class="am-u-sm-3 input-field">
            <!-- <select v-model="arrangeWay">
              <option value="arrangeByWeek">按周排</option>
              <option value="arrangeByDay">按天排</option>
            </select> -->
            <label class="am-checkbox-inline radio">
              <input type="radio" v-model="arrangeWay" value="arrangeByWeek" name="status">按周排
            </label>
            <label class="am-checkbox-inline radio">
              <input type="radio" v-model="arrangeWay" value="arrangeByDay" name="status">按天排
            </label>
          </div>
          <div class="am-u-sm-5 input-field am-u-end">
            <span>首次上课时间：</span>
            <date-picker style="display: inline-block" v-model="startDate">
              <input type="text" class="am-input-lg" placeholder="请选择首次上课时间" data-am-datepicker readonly required>
            </date-picker>
          </div>


        </div>

        <hr/>

        <div class="am-form-group am-g-collapse" v-if="arrangeWay=='arrangeByWeek'" v-for="(day, dayIndex ) in weekDays">

          <div class="am-u-sm-1 input-field am-margin-top-xs">
            <label><input :id="day.id" :value="true" type="checkbox" :disabled="weekDays[dayIndex].disabled"
                          v-model="weekDays[dayIndex].selected"/>{{day.name}}</label>
          </div>
          <template v-for="(time , timeIndex) in day.times">
            <div class="am-u-sm-1 input-field">
              &nbsp;
            </div>
            <div class="am-u-sm-2 input-field">
              <time-picker v-model="weekDays[dayIndex].times[timeIndex]"></time-picker>
            </div>
          </template>
          <div class="am-u-sm-1 am-margin-top-xs am-u-end">
            <a href="javascript:;" @click="addTime(day)"> <i class="am-icon-plus"></i></a>
            <a href="javascript:;" @click="removeTime(day)"><i class="am-icon-remove"></i></a>
          </div>


        </div>
        <div class="am-form-group am-g-collapse" v-if="arrangeWay=='arrangeByDay'">

          <div class="am-u-sm-1 input-field am-margin-top-xs">
            {{everyday.name}}
          </div>
          <template v-for="(time , timeIndex) in everyday.times">
            <div class="am-u-sm-1 input-field">
              &nbsp;
            </div>
            <div class="am-u-sm-2 input-field">
              <time-picker v-model="everyday.times[timeIndex]"></time-picker>
            </div>
          </template>
          <div class="am-u-sm-1 am-margin-top-xs am-u-end">
            <a href="javascript:;" @click="addTime(everyday)"> <i class="am-icon-plus"></i></a>
            <a href="javascript:;" @click="removeTime(everyday)"><i class="am-icon-remove"></i></a>
          </div>


        </div>
        <div class="am-form-group am-g-collapse">
          <input type="text" placeholder="规避节日：选填,填入数据须用空格隔开 如：2014-05-01 2014-10-01" v-model="excludeDays"/>
        </div>
        <div class="am-form-group">
          <div class="am-u-sm-3 am-u-sm-centered">
            <button type="button" class="am-btn am-btn-primary" @click="arrangeTime">预览</button>
          </div>
        </div>

        <div class="am-form-group" v-if="arrangeResult.length > 0 ">
          <div class="am-u-sm-12 am-scrollable-horizontal">
            <table width="100%" class="am-table am-table-bordered am-table-compact am-table-striped am-text-nowrap">
              <thead>
              <tr>
                <th>讲数</th>
                <th>上课日期</th>
                <th>上课时间</th>
              </tr>
              </thead>
              <tbody>
              <tr v-for="( item,index ) in arrangeResult">
                <td>第{{index + 1 }}讲</td>
                <td>{{item.date}} {{item.date|week}}</td>
                <td>{{item.time}}</td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>

        <div class="am-form-group" v-if="arrangeResult.length > 0 ">
          <div class="am-u-sm-3 am-u-sm-centered">
            <button type="button" class="am-btn am-btn-primary" @click="save">保存</button>
          </div>
        </div>

      </form>
  </window>

</template>

<script>
  import io from '../../lib/io'
  import util from '../../lib/util'
  import TimePicker from "../base/TimePicker"
  import moment from 'moment'
  export default{
    components: {TimePicker},
    data(){
      return {
        query: {},
        excludeDays: '',
        selectedIndex: 0,
        startDate: util.formatDate(new Date().getTime()),
        arrangeWay: 'arrangeByWeek',
        weekDays: [],
        everyday:{ },
        arrangeResult: [],
        courseClass:{}
      }
    },
    watch: {
      startDate: function (val) {
      	let _this = this
        if (this.arrangeWay == 'arrangeByWeek' && val) {
          _this.weekDays.map((day, index) => {
          	if (day.id === moment(val, "YYYY-MM-DD").format('dddd')) {
              _this.selectedIndex = index
          		day.disabled = true
          		day.selected = true
            } else {
          		if (day.disabled === true) {
          			day.selected = false
              }
          		day.disabled = false
            }
          })
        }
      },
    },
    created:function(){
       moment.locale('zh-cn')
    },
    methods: {
      init:function(){
      	let _this = this
        this.weekDays = [
          {id: '星期一', selected: false, disabled: false, name: '星期一', times: ['08:00-10:00']},
          {id: '星期二', selected: false, disabled: false, name: '星期二', times: ['08:00-10:00']},
          {id: '星期三', selected: false, disabled: false, name: '星期三', times: ['08:00-10:00']},
          {id: '星期四', selected: false, disabled: false, name: '星期四', times: ['08:00-10:00']},
          {id: '星期五', selected: false, disabled: false, name: '星期五', times: ['08:00-10:00']},
          {id: '星期六', selected: false, disabled: false, name: '星期六', times: ['08:00-10:00']},
          {id: '星期日', selected: false, disabled: false, name: '星期日', times: ['08:00-10:00']},
        ]
        this.everyday = { name: '每天', times: ['08:00-10:00']}
        this.arrangeResult= []
        this.excludeDays =  ''
        this.startDate = util.formatDate(new Date().getTime())
        var dayOfStartDate = moment(this.startDate, "YYYY-MM-DD").format('dddd')
//        this.weekDays.filter((item)=>item.id == dayOfStartDate )[0].selected = true
//        this.weekDays.filter((item)=>item.id == dayOfStartDate )[0].disabled = true
        this.weekDays.map((val, index) => {
        	if (val.id == dayOfStartDate) {
        		val.selected = true
        		val.disabled = true
            _this.selectedIndex = index
          }
        })
        //var _this = this
        //自动选上
        /*this.$nextTick(()=>{
          $('#' + moment(_this.startDate, "YYYY-MM-DD").format('dddd')).click()
        })*/
      },
      addTime: function (day) {
        if (day.times.length > 2) {
          return
        }
        day.times.push('08:00-10:00')
      },
      removeTime: function (day) {
        if (day.times.length > 1) {
          day.times.pop()
        }
      },
      arrangeTime: function () {
        if(!this.startDate){
          this.$alert('请选择首次上课时间')
          return
        }

        this.arrangeResult = []



        if (this.arrangeWay == 'arrangeByWeek') {
          var startIndex = 0
          var selectedDays = []
          for (var i = this.selectedIndex; i < this.selectedIndex + 7; i++) {
            var j = i > 6 ? i-7 : i
            if (this.weekDays[j].selected) {
              if (this.weekDays[j].disabled === true) {
                startIndex = j
              }
              selectedDays.push({
                times: this.weekDays[j].times,
                index: j,
              })
            }
          }

          if(selectedDays.length == 0 ){
            this.$alert('至少选择一天')
            return
          }
          (function () {
            var start = moment(this.startDate, "YYYY-MM-DD")
            var lectureNo = 1
            for (var i = 0; ; i++) {
              for (var ii = 0; ii < selectedDays.length; ii++) {
                var toStartIndex = selectedDays[ii].index - startIndex
                toStartIndex = toStartIndex < 0 ? toStartIndex + 7 : toStartIndex
                var currentDay = moment(start).add( i * 7 +  toStartIndex , 'days')
                var date = currentDay.format("YYYY-MM-DD")
                if(this.inExcludeDay(date)){
                    continue
                }
                for (var iii = 0; iii < selectedDays[ii].times.length; iii++) {
                  var times  = selectedDays[ii].times[iii].split('-')
                  if(times[0] >= times[1]){
                    this.$alert('错误时间段：' + selectedDays[ii].times[iii] )
                    return
                  }
                  this.arrangeResult.push({
                    date : date ,
                    lectureNo : lectureNo++ ,
                    time : selectedDays[ii].times[iii]
                  })
                  if (this.arrangeResult.length >= this.courseClass.lectureAmount) {
                    return
                  }
                }
              }
            }
          }).bind(this).call()

        }else if(this.arrangeWay == 'arrangeByDay'){

          (function () {
            var start = moment(this.startDate, "YYYY-MM-DD")
            if(this.courseClass.lectureAmount === '0') {
              this.$alert('该课程讲数为0，不能排时间，请修改讲数。')
              return
            }
            var lectureNo = 1
            for (var i = 0; ; i++) {
              var currentDay = moment(start).add( i , 'days')
              var date = currentDay.format("YYYY-MM-DD")
              if(this.inExcludeDay(date)){
                continue
              }
              for (var ii = 0; ii < this.everyday.times.length; ii++) {
                var times  = this.everyday.times[ii].split('-')
                if(times[0] >= times[1]){
                  this.$alert('错误时间段：' + this.everyday.times[ii] )
                  return
                }
                this.arrangeResult.push({
                  date : date ,
                  lectureNo : lectureNo++  ,
                  time : this.everyday.times[ii]
                })
                if (this.arrangeResult.length == this.courseClass.lectureAmount) {
                  return
                }
              }
            }
          }).bind(this).call()
        }

      },
      inExcludeDay: function (d) {
        var days = this.excludeDays.split(/\s/)
        for (var i = 0; i < days.length; i++) {
          if(d == days[i]){
            return true
          }
        }
        return false
      },
      save:function(){
          var _this  = this
          _this.$showLoading()
          io.post(io.apiAdminSaveArrangeClassTimeResult,{
            classId : this.courseClass.classId ,
            resultJsonStr : JSON.stringify(this.arrangeResult)
          },function(ret){
              _this.$hiddenLoading()
              if(ret.success){
                  _this.$emit('completed')
                  _this.$refs.win.close()
              }else{
                  _this.$alert(ret.desc ||  '处理失败')
              }
          })
      },
      show:function(){
        this.$refs.win.show({
          width:1000
        })
        this.init()
      }

    },
    filters:{
        week : function(v){
            return moment(v).format('dddd')
        }
    }
  }
</script>
<style lang="less" scoped>
.radio{
  input{
    vertical-align: -2px;
    
  }
  input[type=radio]{
    margin:0;
    margin-right:4px;
  }
}
</style>
